將 ProductInfo 註冊到 ProductApp component 底下，並使用該 component 標籤

<template>
...
<product-info v-if="product" :item="product"></product-info>
...
</template>
<script>
...
import ProductInfo from '@/components/ProductInfo';
export default {
data() {
return {
product: undefined,
};
},
components: {
ProductList,
ProductInfo,
},
};
</script>

這裡我們使用 v-if 來控制當商品尚未被選擇時的情況隱藏商品詳情區塊，並透過 v-bind 的方式，讓商品資料動態
地傳入 ProductInfo component 中；
再來，最重要的一步，我們要偵測使用者在 ProductList 點擊商品，並將該商品資料傳送給 ProductInfo：

1. 在 ProductList 透過 onClick 事件觸發 ($emit) 外層的 ProductApp 的 product-click 事件
2. 在 ProductList 的 product-click 事件中改變 ProductApp data 值
3. data 改變，導致 ProductInfo 的 props 值改變
4. ProductInfo 的 watch 偵測到 props 值改變，觸發 ProductInfo 的 data 改變
5. ProductInfo 的 data 更新，頁面內容重新渲染

<!-- PrdocutList.vue -->
<template>
<div>
<div class="product-container" v-for="product in products"
:key="product.id" @click="onProductClick(product)">
...
</div>
</div>
</template>
<script>
export default {
...
methods: {
onProductClick(product) {
this.$emit('product-click', product);
},
},
}
</script>

在 ProductList 的 container 加入 @click 事件監聽，並傳入 product 作為參數，再利用this.$emit(eventname,argument) 來觸發外部事件
※@click 為 v-on:click 的縮寫
※this.$emit(eventname, argument)，eventname 與外部使用 component 時的事件監聽一致，以 kebabcase
格式命名，如 my-event

<!-- ProductApp -->
<template>
<div>
<product-list v-on:product-click="onProductClick"></product-list>
...
</div>
</template>
<script>
export default {
...
methods: {
onProductClick(product) {
this.product = product;
},
},
}
</script>

在 ProductApp 的 product-list element 加入 @product-click 事件監聽並指定其觸發的方法
如此，我們已經透過傳遞資料的方式做到組件間資料溝通的實作